<template>
  <div class="login-page">
    <div class="login-container">
      <!-- 左侧装饰图片 -->
      <div class="login-banner">
        <div class="banner-content">
          <h1 class="gradient-text">发现美好生活</h1>
          <p>分享你的精彩瞬间，探索无限可能</p>
          <div class="features">
            <div class="feature-item">
              <el-icon><Camera /></el-icon>
              <span>记录生活</span>
            </div>
            <div class="feature-item">
              <el-icon><Share /></el-icon>
              <span>分享美好</span>
            </div>
            <div class="feature-item">
              <el-icon><Star /></el-icon>
              <span>发现精彩</span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧登录表单 -->
      <div class="login-form-container">
        <div class="login-form">
          <div class="form-header">
            <h2>欢迎回来</h2>
            <p>登录到小红书，继续你的精彩之旅</p>
          </div>
          
          <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            label-position="top"
            class="login-form-content"
          >
            <el-form-item label="用户名" prop="username">
              <el-input
                v-model="loginForm.username"
                placeholder="请输入用户名"
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                size="large"
                class="form-input"
                show-password
              >
                <template #prefix>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            
            <div class="form-options">
              <el-checkbox v-model="rememberMe">记住我</el-checkbox>
              <el-link type="primary">忘记密码？</el-link>
            </div>
            
            <el-button
              type="primary"
              size="large"
              class="login-button"
              :loading="loading"
              @click="handleLogin"
            >
              {{ loading ? '登录中...' : '登录' }}
            </el-button>
            
            <div class="form-footer">
              <span>还没有账号？</span>
              <el-link type="primary" @click="$router.push('/register')">
                立即注册
              </el-link>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { ElMessage } from 'element-plus'
import { 
  User, 
  Lock, 
  Camera, 
  Share, 
  Star 
} from '@element-plus/icons-vue'

const authStore = useAuthStore()

const loginFormRef = ref()
const loading = ref(false)
const rememberMe = ref(false)

const loginForm = reactive({
  username: '',
  password: ''
})

const loginRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度为3-20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' }
  ]
}

const handleLogin = async () => {
  console.log('🔍 登录按钮被点击了')
  console.log('🔍 loginFormRef.value:', loginFormRef.value)
  console.log('🔍 loginFormRef本身:', loginFormRef)
  
  // 如果第一次检查为空，等待一下再检查
  if (!loginFormRef.value) {
    console.log('❌ loginFormRef 为空，等待100ms后重试...')
    await new Promise(resolve => setTimeout(resolve, 100))
    console.log('🔍 重试后 loginFormRef.value:', loginFormRef.value)
  }
  
  if (!loginFormRef.value) {
    console.log('❌ loginFormRef 仍然为空，直接返回')
    ElMessage.error('表单初始化失败，请刷新页面重试')
    return
  }
  
  try {
    console.log('🔍 开始表单验证...')
    const valid = await loginFormRef.value.validate()
    console.log('🔍 表单验证结果:', valid)
    
    if (!valid) {
      console.log('❌ 表单验证失败')
      return
    }
    
    console.log('🔍 表单验证通过，开始登录...')
    console.log('🔍 登录表单数据:', loginForm)
    
    loading.value = true
    await authStore.login(loginForm)
    
    console.log('✅ 登录处理完成')
  } catch (error) {
    console.error('❌ 登录失败:', error)
  } finally {
    loading.value = false
    console.log('🔍 重置loading状态')
  }
}
</script>

<style scoped lang="scss">
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, $secondary-color 0%, $bg-white 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-lg;
}

.login-container {
  max-width: 1000px;
  width: 100%;
  background: $bg-white;
  border-radius: $border-radius-large;
  box-shadow: $shadow-heavy;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 600px;
}

.login-banner {
  background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
  color: $text-white;
  padding: $spacing-xxl;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .banner-content {
    text-align: center;
    
    h1 {
      font-size: $font-size-xxl * 1.5;
      margin-bottom: $spacing-md;
      background: linear-gradient(135deg, $text-white 0%, rgba(255, 255, 255, 0.8) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    
    p {
      font-size: $font-size-lg;
      margin-bottom: $spacing-xl;
      opacity: 0.9;
    }
    
    .features {
      display: flex;
      flex-direction: column;
      gap: $spacing-lg;
      
      .feature-item {
        display: flex;
        align-items: center;
        gap: $spacing-md;
        font-size: $font-size-md;
        
        .el-icon {
          font-size: $font-size-lg;
        }
      }
    }
  }
}

.login-form-container {
  padding: $spacing-xxl;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form {
  width: 100%;
  max-width: 350px;
  
  .form-header {
    text-align: center;
    margin-bottom: $spacing-xl;
    
    h2 {
      color: $text-primary;
      font-size: $font-size-xxl;
      margin-bottom: $spacing-sm;
    }
    
    p {
      color: $text-secondary;
      font-size: $font-size-sm;
    }
  }
  
  .login-form-content {
    .form-input {
      :deep(.el-input__wrapper) {
        border-radius: $border-radius-medium;
      }
    }
    
    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: $spacing-lg;
    }
    
    .login-button {
      width: 100%;
      border-radius: $border-radius-medium;
      background: linear-gradient(135deg, $primary-color 0%, $primary-light 100%);
      border: none;
      margin-bottom: $spacing-lg;
      
      &:hover {
        background: linear-gradient(135deg, $primary-dark 0%, $primary-color 100%);
      }
    }
    
    .form-footer {
      text-align: center;
      color: $text-secondary;
      
      .el-link {
        margin-left: $spacing-xs;
      }
    }
  }
}

// 响应式设计
@media (max-width: $breakpoint-md) {
  .login-container {
    grid-template-columns: 1fr;
    max-width: 400px;
  }
  
  .login-banner {
    display: none;
  }
  
  .login-form-container {
    padding: $spacing-xl;
  }
}

@media (max-width: $breakpoint-sm) {
  .login-page {
    padding: $spacing-md;
  }
  
  .login-form-container {
    padding: $spacing-lg;
  }
  
  .login-banner {
    .banner-content {
      .features {
        gap: $spacing-md;
        
        .feature-item {
          font-size: $font-size-sm;
        }
      }
    }
  }
}
</style> 